<template>
  <div class="addtomygoods">
    <flexbox :gutter="15" align="stretch">
      <flexbox-item span="150">
        <div class="goods_img">
          <img :src="goods.picture" alt="">
        </div>
      </flexbox-item>
      <flexbox-item class="right">
        <div class="name">({{goods.brand_name}}){{goods.goods_name}}</div>
        <div class="spec_list">
          <x-button v-if="$route.params.action == 'edit'" @click.native="del(goods.goods_id)" mini type="warn">删除</x-button>
        </div>
      </flexbox-item>
    </flexbox>
    <x-table class="table" :full-bordered="true" :cell-bordered="true">
      <thead>
        <tr>
          <th width="60%">规格</th>
          <th width="20%">价格</th>
          <th width="20%">上架</th>
        </tr>
      </thead>
      <tbody>
        <tr :key="index" v-for="(item,index) in goods_specval">
          <td>({{item.spec_name}}){{item.specval_name}}</td>
          <td><input type="number" v-model="item.price"></td>
          <td v-if="item.specval_pid==0"><check-icon :value.sync="item.checked"></check-icon></td>
          <td v-else><check-icon :value.sync="item.status"></check-icon></td>
        </tr>
      </tbody>
    </x-table>
    <div class="save">
      <x-button @click.native="save" type="warn">保存并发布</x-button>
    </div>
  </div>
</template>
<script>
import { Flexbox, FlexboxItem, XButton, XTable, CheckIcon } from "vux";
export default {
  name: "addtomygoods",
  data() {
    return {
      goods: {},
      goods_specval: []
    };
  },
  components: {
    Flexbox,
    FlexboxItem,
    XButton,
    XTable,
    CheckIcon
  },
  methods: {
    save() {
      let checkData = [];
      const action = this.$route.params.action == "add" ? "create" : "update";
      if (this.$route.params.action == "edit") {
        this.goods_specval.forEach(item => {
          checkData.push({
            specval_id: item.specval_id,
            price: item.price,
            status: item.checked ? 1 : 0
          });
        });
      } else {
        this.goods_specval.forEach(item => {
          if (item.checked == true) {
            checkData.push({
              specval_id: item.specval_id,
              price: item.price,
              status: item.status
            });
          }
        });
      }
      if(checkData.length==0){
        this.$vux.toast.show({
          text:"请先选择规格",
          type:'warn'
        });
        return
      }
      this.$http
        .post("/api/supplier.shop_goods/" + action, {
          data: checkData
        })
        .then(res => {
          if (res.data.code) {
            this.$router.go(-1)
            this.$vux.toast.show({
              text:"添加成功"
            });
          }else{
            this.$vux.toast.show({
              text:res.data.msg,
              type:'warn'
            });            
          }
        });
    },
    del(goods_id) {
      var that = this
      this.$vux.confirm.show({
        content: "你确定删除此商品吗？",
        onConfirm() {
          that.$http
            .post("/api/supplier.shop_goods/delete_all", {
              goods_id,
            })
            .then(res => {
              if (res.data.code) {
                that.$router.go(-1)
                that.$vux.toast.show({
                  text:"删除成功"
                });
              }
            });
        }
      });
    }
  },
  activated() {
    const action = this.$route.params.action == "add" ? "read" : "my_read";
    this.$http
      .get("/api/supplier.shop_goods/" + action, {
        params: {
          goods_id: this.$route.params.goods_id
        }
      })
      .then(res => {
        this.goods = res.data.data.goods;
        if (this.$route.params.action == "edit") {
          this.goods_specval = res.data.data.goods_specval.map(item => {
            item.status = Boolean(item.status);
            return item;
          });
        } else {
          this.goods_specval = res.data.data.goods_specval;
        }
      });
  }
};
</script>
<style scoped lang="less">
.addtomygoods {
  background-color: white;
  padding: 15px;
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
  .table {
    margin-top: 15px;
    input {
      box-sizing: border-box;
      width: 100%;
      height: 100%;
      border: none;
      outline: none;
      text-align: center;
      padding: 0 10px;
    }
  }
  thead {
    background-color: #f1f1f1;
  }
  .save {
    position: absolute;
    bottom: 15px;
    left: 15px;
    right: 15px;
    button {
      background-color: #e6a23c;
    }
    button:active {
      background-color: rgb(221, 157, 74);
    }
  }
}
.name {
  font-size: 18px;
  margin-bottom: 10px;
}
.spec_item {
  line-height: 22px;
}
.spec_list {
  display: flex;
  justify-content: flex-end;
  button {
    margin: 0;
  }
}
.goods_img {
  img {
    width: 100%;
  }
}
.right {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
</style>